﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="bootstrap default admin template">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Material icon | Prince Admin Template</title>


    <!-- Start global css -->
    <link rel="stylesheet" href="../../assets/global/plugins/Waves/dist/waves.min.css"/>
    <link rel="stylesheet" href="../../assets/global/plugins/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/icons_fonts/font-awesome/css/font-awesome.min.css"/>
    <!-- End global css -->

    <!-- Start page plugin css -->
    <link rel="stylesheet" href="../../assets/icons_fonts/material-design-iconic-font/dist/css/material-design-iconic-font.min.css"/>
    <!-- End page plugin css -->

    <!-- Start template global css -->
    <link href="../../assets/global/css/components.min.css" type="text/css" rel="stylesheet"/>
    <!-- End template global css -->

    <!-- Start layout css -->
    <link rel="stylesheet" href="../../assets/layouts/layouts_left_menu/left_menu_layout.min.css"/>
    <!-- End layout css -->

    <!-- Start favicon ico -->
    <link rel="icon" href="../../assets/favicon/prince.ico" type="image/x-icon"/>
    <link rel="icon" type="image/png" sizes="192x192" href="../../assets/favicon/prince-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/prince-180x180.png">
    <!-- End favicon ico -->

</head>
<body class="nav-medium">
<div class="container body">
    <div class="main_container">
            <!-- Start Loader -->
<div class="page-loader">
    <div class="preloader loading">
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
    </div>
</div>
<!-- End Loader -->

<!-- Start Scroll Top -->
<a href="javascript:" id="scroll" style="display: none;"><span></span></a>
<!-- End Scroll Top -->

<!-- start Left Menu-->
<div class="col-md-3 left_color">
    <div class="left_color scroll-view">
        <div class="navbar nav_title">
            <a href="index.html" class="medium-logo">
                <img src="../../assets/global/images/prince_logo.png" alt="medium-logo">
            </a>
            <a href="index.html" class="small-logo">
                <img src="../../assets/global/images/prince_logo2.png" alt="small-logo">
            </a>
        </div>

        <div class="clearfix"></div>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light" href="index.html"><i class="fa fa-home"></i> Dashboard</a></li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-desktop"></i>Basic UI Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="accordions.html">Accordions</a></li>
                            <li> <a class="waves-effect waves-light" href="buttons.html">Buttons</a></li>
                            <li> <a class="waves-effect waves-light" href="dropdowns.html">Dropdowns</a></li>
                            <li> <a class="waves-effect waves-light" href="modals.html">Modals</a></li>
                            <li> <a class="waves-effect waves-light" href="modals_animation.html">Modals Animation</a></li>
                            <li><a class="waves-effect waves-light" href="list.html">List</a></li>
                            <li> <a class="waves-effect waves-light" href="progressbar.html">Progress bar</a></li>
                            <li> <a class="waves-effect waves-light" href="tabs.html">Tabs</a></li>
                            <li> <a class="waves-effect waves-light" href="typography.html">Typography</a></li>
                            <li> <a class="waves-effect waves-light" href="tooltip_popover.html">Tooltips & Popover</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cube"></i>Advanced Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="alerts.html">Alerts</a></li>
                            <li> <a class="waves-effect waves-light" href="custom_scroll.html">Custom scroll</a></li>
                            <li> <a class="waves-effect waves-light" href="timeline.html">Timeline</a></li>
                            <li> <a class="waves-effect waves-light" href="carousel.html">Carousel</a></li>
                        </ul>
                    </li>
                    <li><a  class="waves-effect waves-light"><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="general_elements.html">General Elements</a></li>
                            <li><a class="waves-effect waves-light" href="form_input.html">Form Input</a></li>
                            <li><a class="waves-effect waves-light" href="form_validation.html">Form Validation</a></li>
                            <li><a class="waves-effect waves-light" href="form_mask.html">Form Mask</a></li>
                            <li><a class="waves-effect waves-light" href="form_layouts.html">Form Layouts</a></li>
                            <li><a class="waves-effect waves-light" href="form_wizard.html">Form Wizard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light" href="sweetalerts.html"><i class="fa fa-window-maximize"></i> Popups</a></li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="basic_table.html">Basic Table</a></li>
                            <li><a class="waves-effect waves-light" href="edit_table.html">Edit Table</a></li>
                            <li><a class="waves-effect waves-light" href="basic_datatable.html">Basic Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="advanced_datatable.html">Advanced Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="api_datatable.html">API Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="styling_datatable.html">Styling Datatable</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-bar-chart-o"></i> Charts <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="morris_chart.html">Morris Chart</a></li>
                            <li><a class="waves-effect waves-light" href="sparkline_chart.html">Sparkline Chart</a></li>
                            <li><a class="waves-effect waves-light" href="chartist_chart.html">Chartist</a></li>
                            <li><a class="waves-effect waves-light" href="chart_js.html">Chart.js</a></li>
                            <li><a class="waves-effect waves-light" href="easy_pie_chart.html">Easy Pie Chart</a></li>
                            <li><a class="waves-effect waves-light" href="rickshaw_chart.html">Rickshaw Chart</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-anchor"></i> Icons <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="font_awesome.html">Font awesome</a></li>
                            <li><a class="waves-effect waves-light" href="material_icon.html">Material icon</a></li>
                            <li><a class="waves-effect waves-light" href="themify_icon.html">Themify icon</a></li>
                            <li><a class="waves-effect waves-light" href="flag_icon.html">Flag icon</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-map-marker"></i> Maps <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="map-google.html">Google Maps</a></li>
                            <li><a class="waves-effect waves-light" href="map-vector.html">Vector Map</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-user-circle-o"></i> User Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_login_v1.html">Login 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_login_v2.html">Login 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v1.html">Register 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v2.html">Register 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v1.html">Forgot 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v2.html">Forgot 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v1.html">Lockscreen 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v2.html">Lockscreen 2</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-exclamation-circle"></i> Error Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_404.html">Error 404</a></li>
                            <li><a class="waves-effect waves-light" href="user_400.html">Error 400</a></li>
                            <li><a class="waves-effect waves-light" href="user_403.html">Error 403</a></li>
                            <li><a class="waves-effect waves-light" href="user_405.html">Error 405</a></li>
                            <li><a class="waves-effect waves-light" href="user_500.html">Error 500</a></li>
                            <li><a class="waves-effect waves-light" href="user_503.html">Error 503</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-balance-scale"></i> General Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="faq.html">FAQ</a></li>
                            <li><a class="waves-effect waves-light" href="userlist.html">User List</a></li>
                            <li><a class="waves-effect waves-light" href="invoice.html">Invoice</a></li>
                            <li><a class="waves-effect waves-light" href="blank.html">Blank</a></li>
                            <li><a class="waves-effect waves-light" href="profile.html">Profile</a></li>
                            <li><a class="waves-effect waves-light" href="gallery.html">Gallery</a></li>
                            <li><a class="waves-effect waves-light" href="maintenance.html">Maintenance</a></li>
                            <li><a class="waves-effect waves-light" href="draggable_grid.html">Draggable Grid</a></li>
                            <li><a class="waves-effect waves-light" href="grids.html">Grids</a></li>
                            <li><a class="waves-effect waves-light" href="search_results.html">Search result</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light" href="documentation.html"><i class="fa fa-cogs"></i> Documentation</a></li>
                </ul>
            </div>

        </div>
        <!-- /sidebar menu -->

        <!-- /menu footer buttons -->
        <div class="sidebar-footer hidden-small">
            <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="fa fa-cog" aria-hidden="true"></span>
            </a>
            <a class="toggle-fullscreen" data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="fa fa-arrows-alt" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="fa fa-lock" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                <span class="fa fa-power-off" aria-hidden="true"></span>
            </a>
        </div>
        <!-- /menu footer buttons -->
    </div>
</div>
<!-- End Left Menu -->

<!-- start top navigation -->
<div class="top_nav">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                <div class="responsive-logo">
                    <a href="index.html">
                        <img src="../../assets/global/images/prince_logo.png" alt="main-logo">
                    </a>
                </div>
            </div>

            <div class="topbar-right">
                <div class="nav navbar-nav navbar-right">

                    <div class="header-search right-icon">
                        <form role="search" class="search-box">
                            <input placeholder="Search..." class="form-control" type="text">
                            <a href="javascript:">
                                <i class="fa fa-search"></i>
                            </a>
                        </form>
                    </div>

                    <div class="dropdown header-notification right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light notification-icon"
                           data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell-o" aria-hidden="true"></i>
                            <span class="label label-danger">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="text-center">
                                <p class="notification-title">Notification<span
                                            class="label label-primary">4</span></p>
                            </li>
                            <li class="list-group default-scroll">
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user1.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Domance Den</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user2.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Wikko Menta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user3.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jonny Sem</span> posted 4 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user4.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Doli Senga</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user5.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Bhura Kenta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user6.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jolly Baby</span> posted 2 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>

                            </li>
                            <li class="all-notification">
                                <a href="javascript:;" class="list-group-item text-right">
                                    <small>See all notifications</small>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="header-fullscreen right-icon">
                        <a href="javascript:" class="waves-effect waves-light toggle-fullscreen">
                            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        </a>
                    </div>

                    <!--<div class="header-chat right-icon">
                        <a href="javascript:" class="waves-effect waves-light">
                            <i class="fa fa-comments-o" aria-hidden="true"></i>
                        </a>
                    </div>-->

                    <div class="dropdown user-profile right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light"
                           data-toggle="dropdown"
                           aria-expanded="false">
                            <img src="../../assets/global/images/user10.jpg" alt="user">
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-user" aria-hidden="true"></i>Profile</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-cog" aria-hidden="true"></i>Settings</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-lock" aria-hidden="true"></i>Lock screen</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-power-off text-danger" aria-hidden="true"></i> Logout</a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </nav>
    </div>
</div>
<div class="clearfix"></div>
<!-- End top navigation -->
    <!-- Start Contain Section -->
    <div class="container-fluid right_color">
        <div class="page-main-header">
            <!-- Page Title -->
            <h2 class="page-name-title">Material icon</h2>
            <!--  Breadcrumb -->
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="text-info">Icons</li>
                <li class="active">Material icon</li>
            </ol>
        </div>

        <div class="contain-section">
            <div class="contain-inner-section">

                <div class="row">

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>33 New Icons in 2.2</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">
                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="group" data-code="f3e9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-group zmdi-hc-fw"></i> <span>group</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="rss" data-code="f3ea"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-rss zmdi-hc-fw"></i> <span>rss</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="shape" data-code="f3eb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-shape zmdi-hc-fw"></i> <span>shape</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="spinner" data-code="f3ec"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-spinner zmdi-hc-fw"></i> <span>spinner</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="ungroup" data-code="f3ed"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-ungroup zmdi-hc-fw"></i> <span>ungroup</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="500px" data-code="f3ee"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-500px zmdi-hc-fw"></i> <span>500px</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="8tracks" data-code="f3ef"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-8tracks zmdi-hc-fw"></i> <span>8tracks</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="amazon" data-code="f3f0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-amazon zmdi-hc-fw"></i> <span>amazon</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="blogger" data-code="f3f1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-blogger zmdi-hc-fw"></i> <span>blogger</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="delicious" data-code="f3f2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-delicious zmdi-hc-fw"></i> <span>delicious</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="disqus" data-code="f3f3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-disqus zmdi-hc-fw"></i> <span>disqus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flattr" data-code="f3f4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flattr zmdi-hc-fw"></i> <span>flattr</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flickr" data-code="f3f5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flickr zmdi-hc-fw"></i> <span>flickr</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="github-alt" data-code="f3f6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-github-alt zmdi-hc-fw"></i> <span>github-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-old" data-code="f3f7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-old zmdi-hc-fw"></i> <span>google-old</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="linkedin" data-code="f3f8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-linkedin zmdi-hc-fw"></i> <span>linkedin</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="odnoklassniki" data-code="f3f9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-odnoklassniki zmdi-hc-fw"></i> <span>odnoklassniki</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="outlook" data-code="f3fa"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-outlook zmdi-hc-fw"></i> <span>outlook</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="paypal-alt" data-code="f3fb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-paypal-alt zmdi-hc-fw"></i> <span>paypal-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pinterest" data-code="f3fc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pinterest zmdi-hc-fw"></i> <span>pinterest</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="playstation" data-code="f3fd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-playstation zmdi-hc-fw"></i> <span>playstation</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="reddit" data-code="f3fe"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-reddit zmdi-hc-fw"></i> <span>reddit</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="skype" data-code="f3ff"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-skype zmdi-hc-fw"></i> <span>skype</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="slideshare" data-code="f400"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-slideshare zmdi-hc-fw"></i> <span>slideshare</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="soundcloud" data-code="f401"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-soundcloud zmdi-hc-fw"></i> <span>soundcloud</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tumblr" data-code="f402"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tumblr zmdi-hc-fw"></i> <span>tumblr</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="twitch" data-code="f403"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-twitch zmdi-hc-fw"></i> <span>twitch</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="vimeo" data-code="f404"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-vimeo zmdi-hc-fw"></i> <span>vimeo</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="whatsapp" data-code="f405"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-whatsapp zmdi-hc-fw"></i> <span>whatsapp</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="xbox" data-code="f406"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-xbox zmdi-hc-fw"></i> <span>xbox</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="yahoo" data-code="f407"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-yahoo zmdi-hc-fw"></i> <span>yahoo</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="youtube-play" data-code="f408"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-youtube-play zmdi-hc-fw"></i> <span>youtube-play</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="youtube" data-code="f409"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-youtube zmdi-hc-fw"></i> <span>youtube</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Web application icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="3d-rotation" data-code="f101"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-3d-rotation zmdi-hc-fw"></i> <span>3d-rotation</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airplane-off" data-code="f102"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airplane-off zmdi-hc-fw"></i> <span>airplane-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airplane" data-code="f103"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airplane zmdi-hc-fw"></i> <span>airplane</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="album" data-code="f104"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-album zmdi-hc-fw"></i> <span>album</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="archive" data-code="f105"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-archive zmdi-hc-fw"></i> <span>archive</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="assignment-account" data-code="f106"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-assignment-account zmdi-hc-fw"></i> <span>assignment-account</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="assignment-alert" data-code="f107"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-assignment-alert zmdi-hc-fw"></i> <span>assignment-alert</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="assignment-check" data-code="f108"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-assignment-check zmdi-hc-fw"></i> <span>assignment-check</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="assignment-o" data-code="f109"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-assignment-o zmdi-hc-fw"></i> <span>assignment-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="assignment-return" data-code="f10a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-assignment-return zmdi-hc-fw"></i> <span>assignment-return</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="assignment-returned" data-code="f10b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-assignment-returned zmdi-hc-fw"></i> <span>assignment-returned</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="assignment" data-code="f10c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-assignment zmdi-hc-fw"></i> <span>assignment</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="attachment-alt" data-code="f10d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-attachment-alt zmdi-hc-fw"></i> <span>attachment-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="attachment" data-code="f10e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-attachment zmdi-hc-fw"></i> <span>attachment</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="audio" data-code="f10f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-audio zmdi-hc-fw"></i> <span>audio</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="badge-check" data-code="f110"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-badge-check zmdi-hc-fw"></i> <span>badge-check</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="balance-wallet" data-code="f111"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-balance-wallet zmdi-hc-fw"></i> <span>balance-wallet</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="balance" data-code="f112"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-balance zmdi-hc-fw"></i> <span>balance</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="battery-alert" data-code="f113"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-battery-alert zmdi-hc-fw"></i> <span>battery-alert</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="battery-flash" data-code="f114"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-battery-flash zmdi-hc-fw"></i> <span>battery-flash</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="battery-unknown" data-code="f115"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-battery-unknown zmdi-hc-fw"></i> <span>battery-unknown</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="battery" data-code="f116"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-battery zmdi-hc-fw"></i> <span>battery</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bike" data-code="f117"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bike zmdi-hc-fw"></i> <span>bike</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="block-alt" data-code="f118"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-block-alt zmdi-hc-fw"></i> <span>block-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="block" data-code="f119"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-block zmdi-hc-fw"></i> <span>block</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="boat" data-code="f11a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-boat zmdi-hc-fw"></i> <span>boat</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="book-image" data-code="f11b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-book-image zmdi-hc-fw"></i> <span>book-image</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="book" data-code="f11c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-book zmdi-hc-fw"></i> <span>book</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bookmark-outline" data-code="f11d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bookmark-outline zmdi-hc-fw"></i> <span>bookmark-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bookmark" data-code="f11e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bookmark zmdi-hc-fw"></i> <span>bookmark</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="brush" data-code="f11f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-brush zmdi-hc-fw"></i> <span>brush</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bug" data-code="f120"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bug zmdi-hc-fw"></i> <span>bug</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bus" data-code="f121"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bus zmdi-hc-fw"></i> <span>bus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cake" data-code="f122"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cake zmdi-hc-fw"></i> <span>cake</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="car-taxi" data-code="f123"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-car-taxi zmdi-hc-fw"></i> <span>car-taxi</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="car-wash" data-code="f124"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-car-wash zmdi-hc-fw"></i> <span>car-wash</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="car" data-code="f125"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-car zmdi-hc-fw"></i> <span>car</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="card-giftcard" data-code="f126"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-card-giftcard zmdi-hc-fw"></i> <span>card-giftcard</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="card-membership" data-code="f127"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-card-membership zmdi-hc-fw"></i> <span>card-membership</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="card-travel" data-code="f128"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-card-travel zmdi-hc-fw"></i> <span>card-travel</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="card" data-code="f129"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-card zmdi-hc-fw"></i> <span>card</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="case-check" data-code="f12a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-case-check zmdi-hc-fw"></i> <span>case-check</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="case-download" data-code="f12b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-case-download zmdi-hc-fw"></i> <span>case-download</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="case-play" data-code="f12c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-case-play zmdi-hc-fw"></i> <span>case-play</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="case" data-code="f12d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-case zmdi-hc-fw"></i> <span>case</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cast-connected" data-code="f12e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cast-connected zmdi-hc-fw"></i> <span>cast-connected</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cast" data-code="f12f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cast zmdi-hc-fw"></i> <span>cast</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="chart-donut" data-code="f130"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-chart-donut zmdi-hc-fw"></i> <span>chart-donut</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="chart" data-code="f131"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-chart zmdi-hc-fw"></i> <span>chart</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="city-alt" data-code="f132"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-city-alt zmdi-hc-fw"></i> <span>city-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="city" data-code="f133"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-city zmdi-hc-fw"></i> <span>city</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="close-circle-o" data-code="f134"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-close-circle-o zmdi-hc-fw"></i> <span>close-circle-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="close-circle" data-code="f135"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-close-circle zmdi-hc-fw"></i> <span>close-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="close" data-code="f136"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-close zmdi-hc-fw"></i> <span>close</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cocktail" data-code="f137"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cocktail zmdi-hc-fw"></i> <span>cocktail</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="code-setting" data-code="f138"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-code-setting zmdi-hc-fw"></i> <span>code-setting</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="code-smartphone" data-code="f139"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-code-smartphone zmdi-hc-fw"></i> <span>code-smartphone</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="code" data-code="f13a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-code zmdi-hc-fw"></i> <span>code</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="coffee" data-code="f13b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-coffee zmdi-hc-fw"></i> <span>coffee</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-bookmark" data-code="f13c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-bookmark zmdi-hc-fw"></i> <span>collection-bookmark</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-case-play" data-code="f13d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-case-play zmdi-hc-fw"></i> <span>collection-case-play</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-folder-image" data-code="f13e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-folder-image zmdi-hc-fw"></i> <span>collection-folder-image</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-image-o" data-code="f13f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-image-o zmdi-hc-fw"></i> <span>collection-image-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-image" data-code="f140"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-image zmdi-hc-fw"></i> <span>collection-image</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-1" data-code="f141"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-1 zmdi-hc-fw"></i> <span>collection-item-1</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-2" data-code="f142"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-2 zmdi-hc-fw"></i> <span>collection-item-2</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-3" data-code="f143"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-3 zmdi-hc-fw"></i> <span>collection-item-3</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-4" data-code="f144"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-4 zmdi-hc-fw"></i> <span>collection-item-4</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-5" data-code="f145"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-5 zmdi-hc-fw"></i> <span>collection-item-5</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-6" data-code="f146"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-6 zmdi-hc-fw"></i> <span>collection-item-6</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-7" data-code="f147"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-7 zmdi-hc-fw"></i> <span>collection-item-7</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-8" data-code="f148"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-8 zmdi-hc-fw"></i> <span>collection-item-8</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-9-plus" data-code="f149"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-9-plus zmdi-hc-fw"></i> <span>collection-item-9-plus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item-9" data-code="f14a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item-9 zmdi-hc-fw"></i> <span>collection-item-9</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-item" data-code="f14b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-item zmdi-hc-fw"></i> <span>collection-item</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-music" data-code="f14c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-music zmdi-hc-fw"></i> <span>collection-music</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-pdf" data-code="f14d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-pdf zmdi-hc-fw"></i> <span>collection-pdf</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-plus" data-code="f14e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-plus zmdi-hc-fw"></i> <span>collection-plus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-speaker" data-code="f14f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-speaker zmdi-hc-fw"></i> <span>collection-speaker</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-text" data-code="f150"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-text zmdi-hc-fw"></i> <span>collection-text</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="collection-video" data-code="f151"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-collection-video zmdi-hc-fw"></i> <span>collection-video</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="compass" data-code="f152"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-compass zmdi-hc-fw"></i> <span>compass</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cutlery" data-code="f153"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cutlery zmdi-hc-fw"></i> <span>cutlery</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="delete" data-code="f154"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-delete zmdi-hc-fw"></i> <span>delete</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="dialpad" data-code="f155"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-dialpad zmdi-hc-fw"></i> <span>dialpad</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="dns" data-code="f156"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-dns zmdi-hc-fw"></i> <span>dns</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="drink" data-code="f157"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-drink zmdi-hc-fw"></i> <span>drink</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="edit" data-code="f158"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-edit zmdi-hc-fw"></i> <span>edit</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="email-open" data-code="f159"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-email-open zmdi-hc-fw"></i> <span>email-open</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="email" data-code="f15a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-email zmdi-hc-fw"></i> <span>email</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="eye-off" data-code="f15b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-eye-off zmdi-hc-fw"></i> <span>eye-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="eye" data-code="f15c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-eye zmdi-hc-fw"></i> <span>eye</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="eyedropper" data-code="f15d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-eyedropper zmdi-hc-fw"></i> <span>eyedropper</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="favorite-outline" data-code="f15e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i> <span>favorite-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="favorite" data-code="f15f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-favorite zmdi-hc-fw"></i> <span>favorite</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="filter-list" data-code="f160"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-filter-list zmdi-hc-fw"></i> <span>filter-list</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="fire" data-code="f161"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-fire zmdi-hc-fw"></i> <span>fire</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flag" data-code="f162"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flag zmdi-hc-fw"></i> <span>flag</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flare" data-code="f163"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flare zmdi-hc-fw"></i> <span>flare</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flash-auto" data-code="f164"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flash-auto zmdi-hc-fw"></i> <span>flash-auto</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flash-off" data-code="f165"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flash-off zmdi-hc-fw"></i> <span>flash-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flash" data-code="f166"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flash zmdi-hc-fw"></i> <span>flash</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flip" data-code="f167"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flip zmdi-hc-fw"></i> <span>flip</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flower-alt" data-code="f168"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flower-alt zmdi-hc-fw"></i> <span>flower-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flower" data-code="f169"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flower zmdi-hc-fw"></i> <span>flower</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="font" data-code="f16a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-font zmdi-hc-fw"></i> <span>font</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="fullscreen-alt" data-code="f16b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-fullscreen-alt zmdi-hc-fw"></i> <span>fullscreen-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="fullscreen-exit" data-code="f16c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-fullscreen-exit zmdi-hc-fw"></i> <span>fullscreen-exit</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="fullscreen" data-code="f16d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-fullscreen zmdi-hc-fw"></i> <span>fullscreen</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="functions" data-code="f16e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-functions zmdi-hc-fw"></i> <span>functions</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gas-station" data-code="f16f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-gas-station zmdi-hc-fw"></i> <span>gas-station</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gesture" data-code="f170"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-gesture zmdi-hc-fw"></i> <span>gesture</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="globe-alt" data-code="f171"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-globe-alt zmdi-hc-fw"></i> <span>globe-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="globe-lock" data-code="f172"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-globe-lock zmdi-hc-fw"></i> <span>globe-lock</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="globe" data-code="f173"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-globe zmdi-hc-fw"></i> <span>globe</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="graduation-cap" data-code="f174"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-graduation-cap zmdi-hc-fw"></i> <span>graduation-cap</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="group" data-code="f3e9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-group zmdi-hc-fw"></i> <span>group</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="home" data-code="f175"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-home zmdi-hc-fw"></i> <span>home</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hospital-alt" data-code="f176"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hospital-alt zmdi-hc-fw"></i> <span>hospital-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hospital" data-code="f177"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hospital zmdi-hc-fw"></i> <span>hospital</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hotel" data-code="f178"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hotel zmdi-hc-fw"></i> <span>hotel</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hourglass-alt" data-code="f179"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hourglass-alt zmdi-hc-fw"></i> <span>hourglass-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hourglass-outline" data-code="f17a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hourglass-outline zmdi-hc-fw"></i> <span>hourglass-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hourglass" data-code="f17b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hourglass zmdi-hc-fw"></i> <span>hourglass</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="http" data-code="f17c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-http zmdi-hc-fw"></i> <span>http</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="image-alt" data-code="f17d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-image-alt zmdi-hc-fw"></i> <span>image-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="image-o" data-code="f17e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-image-o zmdi-hc-fw"></i> <span>image-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="image" data-code="f17f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-image zmdi-hc-fw"></i> <span>image</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="inbox" data-code="f180"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-inbox zmdi-hc-fw"></i> <span>inbox</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="invert-colors-off" data-code="f181"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-invert-colors-off zmdi-hc-fw"></i> <span>invert-colors-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="invert-colors" data-code="f182"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-invert-colors zmdi-hc-fw"></i> <span>invert-colors</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="key" data-code="f183"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-key zmdi-hc-fw"></i> <span>key</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="label-alt-outline" data-code="f184"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-label-alt-outline zmdi-hc-fw"></i> <span>label-alt-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="label-alt" data-code="f185"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-label-alt zmdi-hc-fw"></i> <span>label-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="label-heart" data-code="f186"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-label-heart zmdi-hc-fw"></i> <span>label-heart</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="label" data-code="f187"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-label zmdi-hc-fw"></i> <span>label</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="labels" data-code="f188"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-labels zmdi-hc-fw"></i> <span>labels</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="lamp" data-code="f189"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-lamp zmdi-hc-fw"></i> <span>lamp</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="landscape" data-code="f18a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-landscape zmdi-hc-fw"></i> <span>landscape</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="layers-off" data-code="f18b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-layers-off zmdi-hc-fw"></i> <span>layers-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="layers" data-code="f18c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-layers zmdi-hc-fw"></i> <span>layers</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="library" data-code="f18d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-library zmdi-hc-fw"></i> <span>library</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="link" data-code="f18e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-link zmdi-hc-fw"></i> <span>link</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="lock-open" data-code="f18f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-lock-open zmdi-hc-fw"></i> <span>lock-open</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="lock-outline" data-code="f190"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-lock-outline zmdi-hc-fw"></i> <span>lock-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="lock" data-code="f191"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-lock zmdi-hc-fw"></i> <span>lock</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mail-reply-all" data-code="f192"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mail-reply-all zmdi-hc-fw"></i> <span>mail-reply-all</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mail-reply" data-code="f193"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mail-reply zmdi-hc-fw"></i> <span>mail-reply</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mail-send" data-code="f194"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mail-send zmdi-hc-fw"></i> <span>mail-send</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mall" data-code="f195"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mall zmdi-hc-fw"></i> <span>mall</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="map" data-code="f196"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-map zmdi-hc-fw"></i> <span>map</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="menu" data-code="f197"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-menu zmdi-hc-fw"></i> <span>menu</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="money-box" data-code="f198"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-money-box zmdi-hc-fw"></i> <span>money-box</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="money-off" data-code="f199"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-money-off zmdi-hc-fw"></i> <span>money-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="money" data-code="f19a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-money zmdi-hc-fw"></i> <span>money</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="more-vert" data-code="f19b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-more-vert zmdi-hc-fw"></i> <span>more-vert</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="more" data-code="f19c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-more zmdi-hc-fw"></i> <span>more</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="movie-alt" data-code="f19d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-movie-alt zmdi-hc-fw"></i> <span>movie-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="movie" data-code="f19e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-movie zmdi-hc-fw"></i> <span>movie</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="nature-people" data-code="f19f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-nature-people zmdi-hc-fw"></i> <span>nature-people</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="nature" data-code="f1a0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-nature zmdi-hc-fw"></i> <span>nature</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="navigation" data-code="f1a1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-navigation zmdi-hc-fw"></i> <span>navigation</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="open-in-browser" data-code="f1a2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-open-in-browser zmdi-hc-fw"></i> <span>open-in-browser</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="open-in-new" data-code="f1a3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-open-in-new zmdi-hc-fw"></i> <span>open-in-new</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="palette" data-code="f1a4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-palette zmdi-hc-fw"></i> <span>palette</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="parking" data-code="f1a5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-parking zmdi-hc-fw"></i> <span>parking</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-account" data-code="f1a6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-account zmdi-hc-fw"></i> <span>pin-account</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-assistant" data-code="f1a7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-assistant zmdi-hc-fw"></i> <span>pin-assistant</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-drop" data-code="f1a8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-drop zmdi-hc-fw"></i> <span>pin-drop</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-help" data-code="f1a9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-help zmdi-hc-fw"></i> <span>pin-help</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-off" data-code="f1aa"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-off zmdi-hc-fw"></i> <span>pin-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin" data-code="f1ab"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin zmdi-hc-fw"></i> <span>pin</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pizza" data-code="f1ac"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pizza zmdi-hc-fw"></i> <span>pizza</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="plaster" data-code="f1ad"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-plaster zmdi-hc-fw"></i> <span>plaster</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="power-setting" data-code="f1ae"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-power-setting zmdi-hc-fw"></i> <span>power-setting</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="power" data-code="f1af"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-power zmdi-hc-fw"></i> <span>power</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="print" data-code="f1b0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-print zmdi-hc-fw"></i> <span>print</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="puzzle-piece" data-code="f1b1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-puzzle-piece zmdi-hc-fw"></i> <span>puzzle-piece</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="quote" data-code="f1b2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-quote zmdi-hc-fw"></i> <span>quote</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="railway" data-code="f1b3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-railway zmdi-hc-fw"></i> <span>railway</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="receipt" data-code="f1b4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-receipt zmdi-hc-fw"></i> <span>receipt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="refresh-alt" data-code="f1b5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-refresh-alt zmdi-hc-fw"></i> <span>refresh-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="refresh-sync-alert" data-code="f1b6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-refresh-sync-alert zmdi-hc-fw"></i> <span>refresh-sync-alert</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="refresh-sync-off" data-code="f1b7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-refresh-sync-off zmdi-hc-fw"></i> <span>refresh-sync-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="refresh-sync" data-code="f1b8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-refresh-sync zmdi-hc-fw"></i> <span>refresh-sync</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="refresh" data-code="f1b9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-refresh zmdi-hc-fw"></i> <span>refresh</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="roller" data-code="f1ba"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-roller zmdi-hc-fw"></i> <span>roller</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="ruler" data-code="f1bb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-ruler zmdi-hc-fw"></i> <span>ruler</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="scissors" data-code="f1bc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-scissors zmdi-hc-fw"></i> <span>scissors</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="screen-rotation-lock" data-code="f1bd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-screen-rotation-lock zmdi-hc-fw"></i> <span>screen-rotation-lock</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="screen-rotation" data-code="f1be"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-screen-rotation zmdi-hc-fw"></i> <span>screen-rotation</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="search-for" data-code="f1bf"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-search-for zmdi-hc-fw"></i> <span>search-for</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="search-in-file" data-code="f1c0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-search-in-file zmdi-hc-fw"></i> <span>search-in-file</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="search-in-page" data-code="f1c1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-search-in-page zmdi-hc-fw"></i> <span>search-in-page</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="search-replace" data-code="f1c2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-search-replace zmdi-hc-fw"></i> <span>search-replace</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="search" data-code="f1c3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-search zmdi-hc-fw"></i> <span>search</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="seat" data-code="f1c4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-seat zmdi-hc-fw"></i> <span>seat</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="settings-square" data-code="f1c5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-settings-square zmdi-hc-fw"></i> <span>settings-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="settings" data-code="f1c6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-settings zmdi-hc-fw"></i> <span>settings</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="shape" data-code="f3eb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-shape zmdi-hc-fw"></i> <span>shape</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="shield-check" data-code="f1c7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-shield-check zmdi-hc-fw"></i> <span>shield-check</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="shield-security" data-code="f1c8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-shield-security zmdi-hc-fw"></i> <span>shield-security</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="shopping-basket" data-code="f1c9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-shopping-basket zmdi-hc-fw"></i> <span>shopping-basket</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="shopping-cart-plus" data-code="f1ca"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i> <span>shopping-cart-plus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="shopping-cart" data-code="f1cb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-shopping-cart zmdi-hc-fw"></i> <span>shopping-cart</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="sign-in" data-code="f1cc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-sign-in zmdi-hc-fw"></i> <span>sign-in</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="sort-amount-asc" data-code="f1cd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-sort-amount-asc zmdi-hc-fw"></i> <span>sort-amount-asc</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="sort-amount-desc" data-code="f1ce"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-sort-amount-desc zmdi-hc-fw"></i> <span>sort-amount-desc</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="sort-asc" data-code="f1cf"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-sort-asc zmdi-hc-fw"></i> <span>sort-asc</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="sort-desc" data-code="f1d0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-sort-desc zmdi-hc-fw"></i> <span>sort-desc</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="spellcheck" data-code="f1d1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-spellcheck zmdi-hc-fw"></i> <span>spellcheck</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="spinner" data-code="f3ec"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-spinner zmdi-hc-fw"></i> <span>spinner</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="storage" data-code="f1d2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-storage zmdi-hc-fw"></i> <span>storage</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="store-24" data-code="f1d3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-store-24 zmdi-hc-fw"></i> <span>store-24</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="store" data-code="f1d4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-store zmdi-hc-fw"></i> <span>store</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="subway" data-code="f1d5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-subway zmdi-hc-fw"></i> <span>subway</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="sun" data-code="f1d6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-sun zmdi-hc-fw"></i> <span>sun</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tab-unselected" data-code="f1d7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tab-unselected zmdi-hc-fw"></i> <span>tab-unselected</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tab" data-code="f1d8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tab zmdi-hc-fw"></i> <span>tab</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tag-close" data-code="f1d9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tag-close zmdi-hc-fw"></i> <span>tag-close</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tag-more" data-code="f1da"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tag-more zmdi-hc-fw"></i> <span>tag-more</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tag" data-code="f1db"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tag zmdi-hc-fw"></i> <span>tag</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="thumb-down" data-code="f1dc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-thumb-down zmdi-hc-fw"></i> <span>thumb-down</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="thumb-up-down" data-code="f1dd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-thumb-up-down zmdi-hc-fw"></i> <span>thumb-up-down</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="thumb-up" data-code="f1de"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-thumb-up zmdi-hc-fw"></i> <span>thumb-up</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="ticket-star" data-code="f1df"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-ticket-star zmdi-hc-fw"></i> <span>ticket-star</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="toll" data-code="f1e0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-toll zmdi-hc-fw"></i> <span>toll</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="toys" data-code="f1e1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-toys zmdi-hc-fw"></i> <span>toys</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="traffic" data-code="f1e2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-traffic zmdi-hc-fw"></i> <span>traffic</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="translate" data-code="f1e3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-translate zmdi-hc-fw"></i> <span>translate</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="triangle-down" data-code="f1e4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-triangle-down zmdi-hc-fw"></i> <span>triangle-down</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="triangle-up" data-code="f1e5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-triangle-up zmdi-hc-fw"></i> <span>triangle-up</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="truck" data-code="f1e6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-truck zmdi-hc-fw"></i> <span>truck</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="turning-sign" data-code="f1e7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-turning-sign zmdi-hc-fw"></i> <span>turning-sign</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="ungroup" data-code="f3ed"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-ungroup zmdi-hc-fw"></i> <span>ungroup</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wallpaper" data-code="f1e8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wallpaper zmdi-hc-fw"></i> <span>wallpaper</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="washing-machine" data-code="f1e9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-washing-machine zmdi-hc-fw"></i> <span>washing-machine</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="window-maximize" data-code="f1ea"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-window-maximize zmdi-hc-fw"></i> <span>window-maximize</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="window-minimize" data-code="f1eb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-window-minimize zmdi-hc-fw"></i> <span>window-minimize</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="window-restore" data-code="f1ec"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-window-restore zmdi-hc-fw"></i> <span>window-restore</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wrench" data-code="f1ed"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wrench zmdi-hc-fw"></i> <span>wrench</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="zoom-in" data-code="f1ee"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-zoom-in zmdi-hc-fw"></i> <span>zoom-in</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="zoom-out" data-code="f1ef"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-zoom-out zmdi-hc-fw"></i> <span>zoom-out</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Notification icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alert-circle-o" data-code="f1f0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alert-circle-o zmdi-hc-fw"></i> <span>alert-circle-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alert-circle" data-code="f1f1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alert-circle zmdi-hc-fw"></i> <span>alert-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alert-octagon" data-code="f1f2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alert-octagon zmdi-hc-fw"></i> <span>alert-octagon</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alert-polygon" data-code="f1f3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alert-polygon zmdi-hc-fw"></i> <span>alert-polygon</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alert-triangle" data-code="f1f4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alert-triangle zmdi-hc-fw"></i> <span>alert-triangle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="help-outline" data-code="f1f5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-help-outline zmdi-hc-fw"></i> <span>help-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="help" data-code="f1f6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-help zmdi-hc-fw"></i> <span>help</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="info-outline" data-code="f1f7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-info-outline zmdi-hc-fw"></i> <span>info-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="info" data-code="f1f8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-info zmdi-hc-fw"></i> <span>info</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="notifications-active" data-code="f1f9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-notifications-active zmdi-hc-fw"></i> <span>notifications-active</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="notifications-add" data-code="f1fa"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-notifications-add zmdi-hc-fw"></i> <span>notifications-add</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="notifications-none" data-code="f1fb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-notifications-none zmdi-hc-fw"></i> <span>notifications-none</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="notifications-off" data-code="f1fc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-notifications-off zmdi-hc-fw"></i> <span>notifications-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="notifications-paused" data-code="f1fd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-notifications-paused zmdi-hc-fw"></i> <span>notifications-paused</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="notifications" data-code="f1fe"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-notifications zmdi-hc-fw"></i> <span>notifications</span></a></div>


                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Person icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">


                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="account-add" data-code="f1ff"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-account-add zmdi-hc-fw"></i> <span>account-add</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="account-box-mail" data-code="f200"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-account-box-mail zmdi-hc-fw"></i> <span>account-box-mail</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="account-box-o" data-code="f201"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-account-box-o zmdi-hc-fw"></i> <span>account-box-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="account-box-phone" data-code="f202"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-account-box-phone zmdi-hc-fw"></i> <span>account-box-phone</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="account-box" data-code="f203"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-account-box zmdi-hc-fw"></i> <span>account-box</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="account-calendar" data-code="f204"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-account-calendar zmdi-hc-fw"></i> <span>account-calendar</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="account-circle" data-code="f205"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-account-circle zmdi-hc-fw"></i> <span>account-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="account-o" data-code="f206"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-account-o zmdi-hc-fw"></i> <span>account-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="account" data-code="f207"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-account zmdi-hc-fw"></i> <span>account</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="accounts-add" data-code="f208"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-accounts-add zmdi-hc-fw"></i> <span>accounts-add</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="accounts-alt" data-code="f209"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-accounts-alt zmdi-hc-fw"></i> <span>accounts-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="accounts-list-alt" data-code="f20a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-accounts-list-alt zmdi-hc-fw"></i> <span>accounts-list-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="accounts-list" data-code="f20b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-accounts-list zmdi-hc-fw"></i> <span>accounts-list</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="accounts-outline" data-code="f20c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-accounts-outline zmdi-hc-fw"></i> <span>accounts-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="accounts" data-code="f20d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-accounts zmdi-hc-fw"></i> <span>accounts</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="face" data-code="f20e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-face zmdi-hc-fw"></i> <span>face</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="female" data-code="f20f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-female zmdi-hc-fw"></i> <span>female</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="male-alt" data-code="f210"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-male-alt zmdi-hc-fw"></i> <span>male-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="male-female" data-code="f211"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-male-female zmdi-hc-fw"></i> <span>male-female</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="male" data-code="f212"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-male zmdi-hc-fw"></i> <span>male</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mood-bad" data-code="f213"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mood-bad zmdi-hc-fw"></i> <span>mood-bad</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mood" data-code="f214"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mood zmdi-hc-fw"></i> <span>mood</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="run" data-code="f215"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-run zmdi-hc-fw"></i> <span>run</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="walk" data-code="f216"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-walk zmdi-hc-fw"></i> <span>walk</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>File icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cloud-box" data-code="f217"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cloud-box zmdi-hc-fw"></i> <span>cloud-box</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cloud-circle" data-code="f218"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cloud-circle zmdi-hc-fw"></i> <span>cloud-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cloud-done" data-code="f219"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cloud-done zmdi-hc-fw"></i> <span>cloud-done</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cloud-download" data-code="f21a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cloud-download zmdi-hc-fw"></i> <span>cloud-download</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cloud-off" data-code="f21b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cloud-off zmdi-hc-fw"></i> <span>cloud-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cloud-outline-alt" data-code="f21c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cloud-outline-alt zmdi-hc-fw"></i> <span>cloud-outline-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cloud-outline" data-code="f21d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cloud-outline zmdi-hc-fw"></i> <span>cloud-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cloud-upload" data-code="f21e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cloud-upload zmdi-hc-fw"></i> <span>cloud-upload</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cloud" data-code="f21f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-cloud zmdi-hc-fw"></i> <span>cloud</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="download" data-code="f220"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-download zmdi-hc-fw"></i> <span>download</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="file-plus" data-code="f221"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-file-plus zmdi-hc-fw"></i> <span>file-plus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="file-text" data-code="f222"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-file-text zmdi-hc-fw"></i> <span>file-text</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="file" data-code="f223"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-file zmdi-hc-fw"></i> <span>file</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="folder-outline" data-code="f224"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-folder-outline zmdi-hc-fw"></i> <span>folder-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="folder-person" data-code="f225"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-folder-person zmdi-hc-fw"></i> <span>folder-person</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="folder-star-alt" data-code="f226"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-folder-star-alt zmdi-hc-fw"></i> <span>folder-star-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="folder-star" data-code="f227"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-folder-star zmdi-hc-fw"></i> <span>folder-star</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="folder" data-code="f228"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-folder zmdi-hc-fw"></i> <span>folder</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gif" data-code="f229"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-gif zmdi-hc-fw"></i> <span>gif</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="upload" data-code="f22a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-upload zmdi-hc-fw"></i> <span>upload</span></a></div>


                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Editor icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-all" data-code="f22b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-all zmdi-hc-fw"></i> <span>border-all</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-bottom" data-code="f22c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-bottom zmdi-hc-fw"></i> <span>border-bottom</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-clear" data-code="f22d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-clear zmdi-hc-fw"></i> <span>border-clear</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-color" data-code="f22e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-color zmdi-hc-fw"></i> <span>border-color</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-horizontal" data-code="f22f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-horizontal zmdi-hc-fw"></i> <span>border-horizontal</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-inner" data-code="f230"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-inner zmdi-hc-fw"></i> <span>border-inner</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-left" data-code="f231"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-left zmdi-hc-fw"></i> <span>border-left</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-outer" data-code="f232"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-outer zmdi-hc-fw"></i> <span>border-outer</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-right" data-code="f233"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-right zmdi-hc-fw"></i> <span>border-right</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-style" data-code="f234"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-style zmdi-hc-fw"></i> <span>border-style</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-top" data-code="f235"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-top zmdi-hc-fw"></i> <span>border-top</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="border-vertical" data-code="f236"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-border-vertical zmdi-hc-fw"></i> <span>border-vertical</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="copy" data-code="f237"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-copy zmdi-hc-fw"></i> <span>copy</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop" data-code="f238"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop zmdi-hc-fw"></i> <span>crop</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-align-center" data-code="f239"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-align-center zmdi-hc-fw"></i> <span>format-align-center</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-align-justify" data-code="f23a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-align-justify zmdi-hc-fw"></i> <span>format-align-justify</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-align-left" data-code="f23b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-align-left zmdi-hc-fw"></i> <span>format-align-left</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-align-right" data-code="f23c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-align-right zmdi-hc-fw"></i> <span>format-align-right</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-bold" data-code="f23d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-bold zmdi-hc-fw"></i> <span>format-bold</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-clear-all" data-code="f23e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-clear-all zmdi-hc-fw"></i> <span>format-clear-all</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-clear" data-code="f23f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-clear zmdi-hc-fw"></i> <span>format-clear</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-color-fill" data-code="f240"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-color-fill zmdi-hc-fw"></i> <span>format-color-fill</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-color-reset" data-code="f241"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-color-reset zmdi-hc-fw"></i> <span>format-color-reset</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-color-text" data-code="f242"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-color-text zmdi-hc-fw"></i> <span>format-color-text</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-indent-decrease" data-code="f243"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-indent-decrease zmdi-hc-fw"></i> <span>format-indent-decrease</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-indent-increase" data-code="f244"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-indent-increase zmdi-hc-fw"></i> <span>format-indent-increase</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-italic" data-code="f245"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-italic zmdi-hc-fw"></i> <span>format-italic</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-line-spacing" data-code="f246"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-line-spacing zmdi-hc-fw"></i> <span>format-line-spacing</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-list-bulleted" data-code="f247"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-list-bulleted zmdi-hc-fw"></i> <span>format-list-bulleted</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-list-numbered" data-code="f248"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-list-numbered zmdi-hc-fw"></i> <span>format-list-numbered</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-ltr" data-code="f249"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-ltr zmdi-hc-fw"></i> <span>format-ltr</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-rtl" data-code="f24a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-rtl zmdi-hc-fw"></i> <span>format-rtl</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-size" data-code="f24b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-size zmdi-hc-fw"></i> <span>format-size</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-strikethrough-s" data-code="f24c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-strikethrough-s zmdi-hc-fw"></i> <span>format-strikethrough-s</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-strikethrough" data-code="f24d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-strikethrough zmdi-hc-fw"></i> <span>format-strikethrough</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-subject" data-code="f24e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-subject zmdi-hc-fw"></i> <span>format-subject</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-underlined" data-code="f24f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-underlined zmdi-hc-fw"></i> <span>format-underlined</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-valign-bottom" data-code="f250"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-valign-bottom zmdi-hc-fw"></i> <span>format-valign-bottom</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-valign-center" data-code="f251"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-valign-center zmdi-hc-fw"></i> <span>format-valign-center</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="format-valign-top" data-code="f252"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-format-valign-top zmdi-hc-fw"></i> <span>format-valign-top</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="redo" data-code="f253"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-redo zmdi-hc-fw"></i> <span>redo</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="select-all" data-code="f254"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-select-all zmdi-hc-fw"></i> <span>select-all</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="space-bar" data-code="f255"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-space-bar zmdi-hc-fw"></i> <span>space-bar</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="text-format" data-code="f256"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-text-format zmdi-hc-fw"></i> <span>text-format</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="transform" data-code="f257"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-transform zmdi-hc-fw"></i> <span>transform</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="undo" data-code="f258"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-undo zmdi-hc-fw"></i> <span>undo</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wrap-text" data-code="f259"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wrap-text zmdi-hc-fw"></i> <span>wrap-text</span></a></div>


                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Comment icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-alert" data-code="f25a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-alert zmdi-hc-fw"></i> <span>comment-alert</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-alt-text" data-code="f25b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-alt-text zmdi-hc-fw"></i> <span>comment-alt-text</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-alt" data-code="f25c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-alt zmdi-hc-fw"></i> <span>comment-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-edit" data-code="f25d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-edit zmdi-hc-fw"></i> <span>comment-edit</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-image" data-code="f25e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-image zmdi-hc-fw"></i> <span>comment-image</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-list" data-code="f25f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-list zmdi-hc-fw"></i> <span>comment-list</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-more" data-code="f260"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-more zmdi-hc-fw"></i> <span>comment-more</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-outline" data-code="f261"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-outline zmdi-hc-fw"></i> <span>comment-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-text" data-code="f263"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-text zmdi-hc-fw"></i> <span>comment-text</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment-video" data-code="f264"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment-video zmdi-hc-fw"></i> <span>comment-video</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comment" data-code="f265"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comment zmdi-hc-fw"></i> <span>comment</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="comments" data-code="f266"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-comments zmdi-hc-fw"></i> <span>comments</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Form icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="check-all" data-code="f267"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-check-all zmdi-hc-fw"></i> <span>check-all</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="check-circle-u" data-code="f268"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-check-circle-u zmdi-hc-fw"></i> <span>check-circle-u</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="check-circle" data-code="f269"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-check-circle zmdi-hc-fw"></i> <span>check-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="check-square" data-code="f26a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-check-square zmdi-hc-fw"></i> <span>check-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="check" data-code="f26b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-check zmdi-hc-fw"></i> <span>check</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="circle-o" data-code="f26c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-circle-o zmdi-hc-fw"></i> <span>circle-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="circle" data-code="f26d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-circle zmdi-hc-fw"></i> <span>circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="dot-circle-alt" data-code="f26e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-dot-circle-alt zmdi-hc-fw"></i> <span>dot-circle-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="dot-circle" data-code="f26f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-dot-circle zmdi-hc-fw"></i> <span>dot-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="minus-circle-outline" data-code="f270"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-minus-circle-outline zmdi-hc-fw"></i> <span>minus-circle-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="minus-circle" data-code="f271"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-minus-circle zmdi-hc-fw"></i> <span>minus-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="minus-square" data-code="f272"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-minus-square zmdi-hc-fw"></i> <span>minus-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="minus" data-code="f273"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-minus zmdi-hc-fw"></i> <span>minus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="plus-circle-o-duplicate" data-code="f274"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-plus-circle-o-duplicate zmdi-hc-fw"></i> <span>plus-circle-o-duplicate</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="plus-circle-o" data-code="f275"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-plus-circle-o zmdi-hc-fw"></i> <span>plus-circle-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="plus-circle" data-code="f276"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-plus-circle zmdi-hc-fw"></i> <span>plus-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="plus-square" data-code="f277"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-plus-square zmdi-hc-fw"></i> <span>plus-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="plus" data-code="f278"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-plus zmdi-hc-fw"></i> <span>plus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="square-o" data-code="f279"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-square-o zmdi-hc-fw"></i> <span>square-o</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="star-circle" data-code="f27a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-star-circle zmdi-hc-fw"></i> <span>star-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="star-half" data-code="f27b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-star-half zmdi-hc-fw"></i> <span>star-half</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="star-outline" data-code="f27c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-star-outline zmdi-hc-fw"></i> <span>star-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="star" data-code="f27d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-star zmdi-hc-fw"></i> <span>star</span></a></div>


                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Hardware icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bluetooth-connected" data-code="f27e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bluetooth-connected zmdi-hc-fw"></i> <span>bluetooth-connected</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bluetooth-off" data-code="f27f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bluetooth-off zmdi-hc-fw"></i> <span>bluetooth-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bluetooth-search" data-code="f280"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bluetooth-search zmdi-hc-fw"></i> <span>bluetooth-search</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bluetooth-setting" data-code="f281"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bluetooth-setting zmdi-hc-fw"></i> <span>bluetooth-setting</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bluetooth" data-code="f282"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-bluetooth zmdi-hc-fw"></i> <span>bluetooth</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera-add" data-code="f283"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera-add zmdi-hc-fw"></i> <span>camera-add</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera-alt" data-code="f284"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera-alt zmdi-hc-fw"></i> <span>camera-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera-bw" data-code="f285"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera-bw zmdi-hc-fw"></i> <span>camera-bw</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera-front" data-code="f286"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera-front zmdi-hc-fw"></i> <span>camera-front</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera-mic" data-code="f287"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera-mic zmdi-hc-fw"></i> <span>camera-mic</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera-party-mode" data-code="f288"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera-party-mode zmdi-hc-fw"></i> <span>camera-party-mode</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera-rear" data-code="f289"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera-rear zmdi-hc-fw"></i> <span>camera-rear</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera-roll" data-code="f28a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera-roll zmdi-hc-fw"></i> <span>camera-roll</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera-switch" data-code="f28b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera-switch zmdi-hc-fw"></i> <span>camera-switch</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera" data-code="f28c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-camera zmdi-hc-fw"></i> <span>camera</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="card-alert" data-code="f28d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-card-alert zmdi-hc-fw"></i> <span>card-alert</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="card-off" data-code="f28e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-card-off zmdi-hc-fw"></i> <span>card-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="card-sd" data-code="f28f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-card-sd zmdi-hc-fw"></i> <span>card-sd</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="card-sim" data-code="f290"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-card-sim zmdi-hc-fw"></i> <span>card-sim</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="desktop-mac" data-code="f291"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-desktop-mac zmdi-hc-fw"></i> <span>desktop-mac</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="desktop-windows" data-code="f292"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-desktop-windows zmdi-hc-fw"></i> <span>desktop-windows</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="device-hub" data-code="f293"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-device-hub zmdi-hc-fw"></i> <span>device-hub</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="devices-off" data-code="f294"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-devices-off zmdi-hc-fw"></i> <span>devices-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="devices" data-code="f295"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-devices zmdi-hc-fw"></i> <span>devices</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="dock" data-code="f296"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-dock zmdi-hc-fw"></i> <span>dock</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="floppy" data-code="f297"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-floppy zmdi-hc-fw"></i> <span>floppy</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gamepad" data-code="f298"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-gamepad zmdi-hc-fw"></i> <span>gamepad</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gps-dot" data-code="f299"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-gps-dot zmdi-hc-fw"></i> <span>gps-dot</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gps-off" data-code="f29a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-gps-off zmdi-hc-fw"></i> <span>gps-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gps" data-code="f29b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-gps zmdi-hc-fw"></i> <span>gps</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="headset-mic" data-code="f29c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-headset-mic zmdi-hc-fw"></i> <span>headset-mic</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="headset" data-code="f29d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-headset zmdi-hc-fw"></i> <span>headset</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="input-antenna" data-code="f29e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-input-antenna zmdi-hc-fw"></i> <span>input-antenna</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="input-composite" data-code="f29f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-input-composite zmdi-hc-fw"></i> <span>input-composite</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="input-hdmi" data-code="f2a0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-input-hdmi zmdi-hc-fw"></i> <span>input-hdmi</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="input-power" data-code="f2a1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-input-power zmdi-hc-fw"></i> <span>input-power</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="input-svideo" data-code="f2a2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-input-svideo zmdi-hc-fw"></i> <span>input-svideo</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="keyboard-hide" data-code="f2a3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-keyboard-hide zmdi-hc-fw"></i> <span>keyboard-hide</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="keyboard" data-code="f2a4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-keyboard zmdi-hc-fw"></i> <span>keyboard</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="laptop-chromebook" data-code="f2a5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-laptop-chromebook zmdi-hc-fw"></i> <span>laptop-chromebook</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="laptop-mac" data-code="f2a6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-laptop-mac zmdi-hc-fw"></i> <span>laptop-mac</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="laptop" data-code="f2a7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-laptop zmdi-hc-fw"></i> <span>laptop</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mic-off" data-code="f2a8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mic-off zmdi-hc-fw"></i> <span>mic-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mic-outline" data-code="f2a9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mic-outline zmdi-hc-fw"></i> <span>mic-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mic-setting" data-code="f2aa"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mic-setting zmdi-hc-fw"></i> <span>mic-setting</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mic" data-code="f2ab"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mic zmdi-hc-fw"></i> <span>mic</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mouse" data-code="f2ac"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-mouse zmdi-hc-fw"></i> <span>mouse</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="network-alert" data-code="f2ad"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-network-alert zmdi-hc-fw"></i> <span>network-alert</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="network-locked" data-code="f2ae"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-network-locked zmdi-hc-fw"></i> <span>network-locked</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="network-off" data-code="f2af"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-network-off zmdi-hc-fw"></i> <span>network-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="network-outline" data-code="f2b0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-network-outline zmdi-hc-fw"></i> <span>network-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="network-setting" data-code="f2b1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-network-setting zmdi-hc-fw"></i> <span>network-setting</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="network" data-code="f2b2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-network zmdi-hc-fw"></i> <span>network</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-bluetooth" data-code="f2b3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-bluetooth zmdi-hc-fw"></i> <span>phone-bluetooth</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-end" data-code="f2b4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-end zmdi-hc-fw"></i> <span>phone-end</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-forwarded" data-code="f2b5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-forwarded zmdi-hc-fw"></i> <span>phone-forwarded</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-in-talk" data-code="f2b6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-in-talk zmdi-hc-fw"></i> <span>phone-in-talk</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-locked" data-code="f2b7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-locked zmdi-hc-fw"></i> <span>phone-locked</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-missed" data-code="f2b8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-missed zmdi-hc-fw"></i> <span>phone-missed</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-msg" data-code="f2b9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-msg zmdi-hc-fw"></i> <span>phone-msg</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-paused" data-code="f2ba"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-paused zmdi-hc-fw"></i> <span>phone-paused</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-ring" data-code="f2bb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-ring zmdi-hc-fw"></i> <span>phone-ring</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-setting" data-code="f2bc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-setting zmdi-hc-fw"></i> <span>phone-setting</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone-sip" data-code="f2bd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone-sip zmdi-hc-fw"></i> <span>phone-sip</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone" data-code="f2be"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-phone zmdi-hc-fw"></i> <span>phone</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="portable-wifi-changes" data-code="f2bf"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-portable-wifi-changes zmdi-hc-fw"></i> <span>portable-wifi-changes</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="portable-wifi-off" data-code="f2c0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-portable-wifi-off zmdi-hc-fw"></i> <span>portable-wifi-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="portable-wifi" data-code="f2c1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-portable-wifi zmdi-hc-fw"></i> <span>portable-wifi</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="radio" data-code="f2c2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-radio zmdi-hc-fw"></i> <span>radio</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="reader" data-code="f2c3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-reader zmdi-hc-fw"></i> <span>reader</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="remote-control-alt" data-code="f2c4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-remote-control-alt zmdi-hc-fw"></i> <span>remote-control-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="remote-control" data-code="f2c5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-remote-control zmdi-hc-fw"></i> <span>remote-control</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="router" data-code="f2c6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-router zmdi-hc-fw"></i> <span>router</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="scanner" data-code="f2c7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-scanner zmdi-hc-fw"></i> <span>scanner</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-android" data-code="f2c8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-android zmdi-hc-fw"></i> <span>smartphone-android</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-download" data-code="f2c9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-download zmdi-hc-fw"></i> <span>smartphone-download</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-erase" data-code="f2ca"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-erase zmdi-hc-fw"></i> <span>smartphone-erase</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-info" data-code="f2cb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-info zmdi-hc-fw"></i> <span>smartphone-info</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-iphone" data-code="f2cc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-iphone zmdi-hc-fw"></i> <span>smartphone-iphone</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-landscape-lock" data-code="f2cd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-landscape-lock zmdi-hc-fw"></i> <span>smartphone-landscape-lock</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-landscape" data-code="f2ce"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-landscape zmdi-hc-fw"></i> <span>smartphone-landscape</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-lock" data-code="f2cf"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-lock zmdi-hc-fw"></i> <span>smartphone-lock</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-portrait-lock" data-code="f2d0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-portrait-lock zmdi-hc-fw"></i> <span>smartphone-portrait-lock</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-ring" data-code="f2d1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-ring zmdi-hc-fw"></i> <span>smartphone-ring</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-setting" data-code="f2d2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-setting zmdi-hc-fw"></i> <span>smartphone-setting</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone-setup" data-code="f2d3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone-setup zmdi-hc-fw"></i> <span>smartphone-setup</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="smartphone" data-code="f2d4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-smartphone zmdi-hc-fw"></i> <span>smartphone</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="speaker" data-code="f2d5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-speaker zmdi-hc-fw"></i> <span>speaker</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tablet-android" data-code="f2d6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tablet-android zmdi-hc-fw"></i> <span>tablet-android</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tablet-mac" data-code="f2d7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tablet-mac zmdi-hc-fw"></i> <span>tablet-mac</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tablet" data-code="f2d8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tablet zmdi-hc-fw"></i> <span>tablet</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tv-alt-play" data-code="f2d9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tv-alt-play zmdi-hc-fw"></i> <span>tv-alt-play</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tv-list" data-code="f2da"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tv-list zmdi-hc-fw"></i> <span>tv-list</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tv-play" data-code="f2db"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tv-play zmdi-hc-fw"></i> <span>tv-play</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tv" data-code="f2dc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tv zmdi-hc-fw"></i> <span>tv</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="usb" data-code="f2dd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-usb zmdi-hc-fw"></i> <span>usb</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="videocam-off" data-code="f2de"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-videocam-off zmdi-hc-fw"></i> <span>videocam-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="videocam-switch" data-code="f2df"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-videocam-switch zmdi-hc-fw"></i> <span>videocam-switch</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="videocam" data-code="f2e0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-videocam zmdi-hc-fw"></i> <span>videocam</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="watch" data-code="f2e1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-watch zmdi-hc-fw"></i> <span>watch</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wifi-alt-2" data-code="f2e2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wifi-alt-2 zmdi-hc-fw"></i> <span>wifi-alt-2</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wifi-alt" data-code="f2e3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wifi-alt zmdi-hc-fw"></i> <span>wifi-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wifi-info" data-code="f2e4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wifi-info zmdi-hc-fw"></i> <span>wifi-info</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wifi-lock" data-code="f2e5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wifi-lock zmdi-hc-fw"></i> <span>wifi-lock</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wifi-off" data-code="f2e6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wifi-off zmdi-hc-fw"></i> <span>wifi-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wifi-outline" data-code="f2e7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wifi-outline zmdi-hc-fw"></i> <span>wifi-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wifi" data-code="f2e8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wifi zmdi-hc-fw"></i> <span>wifi</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Directional icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="arrow-left-bottom" data-code="f2e9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-arrow-left-bottom zmdi-hc-fw"></i> <span>arrow-left-bottom</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="arrow-left" data-code="f2ea"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-arrow-left zmdi-hc-fw"></i> <span>arrow-left</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="arrow-merge" data-code="f2eb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-arrow-merge zmdi-hc-fw"></i> <span>arrow-merge</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="arrow-missed" data-code="f2ec"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-arrow-missed zmdi-hc-fw"></i> <span>arrow-missed</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="arrow-right-top" data-code="f2ed"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-arrow-right-top zmdi-hc-fw"></i> <span>arrow-right-top</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="arrow-right" data-code="f2ee"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-arrow-right zmdi-hc-fw"></i> <span>arrow-right</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="arrow-split" data-code="f2ef"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-arrow-split zmdi-hc-fw"></i> <span>arrow-split</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="arrows" data-code="f2f0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-arrows zmdi-hc-fw"></i> <span>arrows</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="caret-down-circle" data-code="f2f1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-caret-down-circle zmdi-hc-fw"></i> <span>caret-down-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="caret-down" data-code="f2f2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-caret-down zmdi-hc-fw"></i> <span>caret-down</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="caret-left-circle" data-code="f2f3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-caret-left-circle zmdi-hc-fw"></i> <span>caret-left-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="caret-left" data-code="f2f4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-caret-left zmdi-hc-fw"></i> <span>caret-left</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="caret-right-circle" data-code="f2f5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-caret-right-circle zmdi-hc-fw"></i> <span>caret-right-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="caret-right" data-code="f2f6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-caret-right zmdi-hc-fw"></i> <span>caret-right</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="caret-up-circle" data-code="f2f7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-caret-up-circle zmdi-hc-fw"></i> <span>caret-up-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="caret-up" data-code="f2f8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-caret-up zmdi-hc-fw"></i> <span>caret-up</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="chevron-down" data-code="f2f9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-chevron-down zmdi-hc-fw"></i> <span>chevron-down</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="chevron-left" data-code="f2fa"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-chevron-left zmdi-hc-fw"></i> <span>chevron-left</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="chevron-right" data-code="f2fb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-chevron-right zmdi-hc-fw"></i> <span>chevron-right</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="chevron-up" data-code="f2fc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-chevron-up zmdi-hc-fw"></i> <span>chevron-up</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="forward" data-code="f2fd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-forward zmdi-hc-fw"></i> <span>forward</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="long-arrow-down" data-code="f2fe"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-long-arrow-down zmdi-hc-fw"></i> <span>long-arrow-down</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="long-arrow-left" data-code="f2ff"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-long-arrow-left zmdi-hc-fw"></i> <span>long-arrow-left</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="long-arrow-return" data-code="f300"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-long-arrow-return zmdi-hc-fw"></i> <span>long-arrow-return</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="long-arrow-right" data-code="f301"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-long-arrow-right zmdi-hc-fw"></i> <span>long-arrow-right</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="long-arrow-tab" data-code="f302"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-long-arrow-tab zmdi-hc-fw"></i> <span>long-arrow-tab</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="long-arrow-up" data-code="f303"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-long-arrow-up zmdi-hc-fw"></i> <span>long-arrow-up</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="rotate-ccw" data-code="f304"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-rotate-ccw zmdi-hc-fw"></i> <span>rotate-ccw</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="rotate-cw" data-code="f305"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-rotate-cw zmdi-hc-fw"></i> <span>rotate-cw</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="rotate-left" data-code="f306"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-rotate-left zmdi-hc-fw"></i> <span>rotate-left</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="rotate-right" data-code="f307"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-rotate-right zmdi-hc-fw"></i> <span>rotate-right</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="square-down" data-code="f308"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-square-down zmdi-hc-fw"></i> <span>square-down</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="square-right" data-code="f309"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-square-right zmdi-hc-fw"></i> <span>square-right</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="swap-alt" data-code="f30a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-swap-alt zmdi-hc-fw"></i> <span>swap-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="swap-vertical-circle" data-code="f30b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-swap-vertical-circle zmdi-hc-fw"></i> <span>swap-vertical-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="swap-vertical" data-code="f30c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-swap-vertical zmdi-hc-fw"></i> <span>swap-vertical</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="swap" data-code="f30d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-swap zmdi-hc-fw"></i> <span>swap</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="trending-down" data-code="f30e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-trending-down zmdi-hc-fw"></i> <span>trending-down</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="trending-flat" data-code="f30f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-trending-flat zmdi-hc-fw"></i> <span>trending-flat</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="trending-up" data-code="f310"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-trending-up zmdi-hc-fw"></i> <span>trending-up</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="unfold-less" data-code="f311"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-unfold-less zmdi-hc-fw"></i> <span>unfold-less</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="unfold-more" data-code="f312"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-unfold-more zmdi-hc-fw"></i> <span>unfold-more</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Map (aliases) icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bike" data-code="f117"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-directions-bike zmdi-hc-fw"></i> zmdi-directions-bike</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="boat" data-code="f11a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-directions-boat zmdi-hc-fw"></i> zmdi-directions-boat</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="bus" data-code="f121"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-directions-bus zmdi-hc-fw"></i> zmdi-directions-bus</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="car" data-code="f125"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-directions-car zmdi-hc-fw"></i> zmdi-directions-car</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="railway" data-code="f1b3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-directions-railway zmdi-hc-fw"></i> zmdi-directions-railway</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="run" data-code="f215"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-directions-run zmdi-hc-fw"></i> zmdi-directions-run</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="subway" data-code="f1d5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-directions-subway zmdi-hc-fw"></i> zmdi-directions-subway</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="walk" data-code="f216"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-directions-walk zmdi-hc-fw"></i> zmdi-directions-walk</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="turning-sign" data-code="f1e7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-directions zmdi-hc-fw"></i> zmdi-directions</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="layers-off" data-code="f18b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-layers-off zmdi-hc-fw"></i> zmdi-layers-off</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="layers" data-code="f18c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-layers zmdi-hc-fw"></i> zmdi-layers</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="ticket-star" data-code="f1df"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-activity zmdi-hc-fw"></i> zmdi-local-activity</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airplane" data-code="f103"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-airport zmdi-hc-fw"></i> zmdi-local-airport</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="money-box" data-code="f198"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-atm zmdi-hc-fw"></i> zmdi-local-atm</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cocktail" data-code="f137"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-bar zmdi-hc-fw"></i> zmdi-local-bar</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="coffee" data-code="f13b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-cafe zmdi-hc-fw"></i> zmdi-local-cafe</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="car-wash" data-code="f124"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-car-wash zmdi-hc-fw"></i> zmdi-local-car-wash</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="store-24" data-code="f1d3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-convenience-store zmdi-hc-fw"></i> zmdi-local-convenience-store</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="cutlery" data-code="f153"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-dining zmdi-hc-fw"></i> zmdi-local-dining</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="drink" data-code="f157"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-drink zmdi-hc-fw"></i> zmdi-local-drink</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flower-alt" data-code="f168"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-florist zmdi-hc-fw"></i> zmdi-local-florist</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gas-station" data-code="f16f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-gas-station zmdi-hc-fw"></i> zmdi-local-gas-station</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="shopping-cart" data-code="f1cb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-grocery-store zmdi-hc-fw"></i> zmdi-local-grocery-store</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hospital" data-code="f177"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-hospital zmdi-hc-fw"></i> zmdi-local-hospital</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hotel" data-code="f178"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-hotel zmdi-hc-fw"></i> zmdi-local-hotel</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="washing-machine" data-code="f1e9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-laundry-service zmdi-hc-fw"></i> zmdi-local-laundry-service</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="library" data-code="f18d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-library zmdi-hc-fw"></i> zmdi-local-library</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="mall" data-code="f195"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-mall zmdi-hc-fw"></i> zmdi-local-mall</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="movie-alt" data-code="f19d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-movies zmdi-hc-fw"></i> zmdi-local-movies</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="label" data-code="f187"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-offer zmdi-hc-fw"></i> zmdi-local-offer</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="parking" data-code="f1a5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-parking zmdi-hc-fw"></i> zmdi-local-parking</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hospital-alt" data-code="f176"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-pharmacy zmdi-hc-fw"></i> zmdi-local-pharmacy</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="phone" data-code="f2be"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-phone zmdi-hc-fw"></i> zmdi-local-phone</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pizza" data-code="f1ac"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-pizza zmdi-hc-fw"></i> zmdi-local-pizza</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="ticket-star" data-code="f1df"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-activity zmdi-hc-fw"></i> zmdi-local-activity</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="email" data-code="f15a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-post-office zmdi-hc-fw"></i> zmdi-local-post-office</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="print" data-code="f1b0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-printshop zmdi-hc-fw"></i> zmdi-local-printshop</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="camera" data-code="f28c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-see zmdi-hc-fw"></i> zmdi-local-see</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="truck" data-code="f1e6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-shipping zmdi-hc-fw"></i> zmdi-local-shipping</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="store" data-code="f1d4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-store zmdi-hc-fw"></i> zmdi-local-store</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="car-taxi" data-code="f123"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-taxi zmdi-hc-fw"></i> zmdi-local-taxi</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="male-female" data-code="f211"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-local-wc zmdi-hc-fw"></i> zmdi-local-wc</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="map" data-code="f196"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-map zmdi-hc-fw"></i> zmdi-map</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gps-dot" data-code="f299"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-my-location zmdi-hc-fw"></i> zmdi-my-location</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="nature-people" data-code="f19f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-nature-people zmdi-hc-fw"></i> zmdi-nature-people</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="nature" data-code="f1a0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-nature zmdi-hc-fw"></i> zmdi-nature</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="navigation" data-code="f1a1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-navigation zmdi-hc-fw"></i> zmdi-navigation</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-account" data-code="f1a6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-account zmdi-hc-fw"></i> zmdi-pin-account</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-assistant" data-code="f1a7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-assistant zmdi-hc-fw"></i> zmdi-pin-assistant</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-drop" data-code="f1a8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-drop zmdi-hc-fw"></i> zmdi-pin-drop</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-help" data-code="f1a9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-help zmdi-hc-fw"></i> zmdi-pin-help</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin-off" data-code="f1aa"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin-off zmdi-hc-fw"></i> zmdi-pin-off</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pin" data-code="f1ab"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pin zmdi-hc-fw"></i> zmdi-pin</a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="traffic" data-code="f1e2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-traffic zmdi-hc-fw"></i> zmdi-traffic</a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>View icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="apps" data-code="f313"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-apps zmdi-hc-fw"></i> <span>apps</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="grid-off" data-code="f314"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-grid-off zmdi-hc-fw"></i> <span>grid-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="grid" data-code="f315"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-grid zmdi-hc-fw"></i> <span>grid</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-agenda" data-code="f316"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-agenda zmdi-hc-fw"></i> <span>view-agenda</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-array" data-code="f317"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-array zmdi-hc-fw"></i> <span>view-array</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-carousel" data-code="f318"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-carousel zmdi-hc-fw"></i> <span>view-carousel</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-column" data-code="f319"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-column zmdi-hc-fw"></i> <span>view-column</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-comfy" data-code="f31a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-comfy zmdi-hc-fw"></i> <span>view-comfy</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-compact" data-code="f31b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-compact zmdi-hc-fw"></i> <span>view-compact</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-dashboard" data-code="f31c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-dashboard zmdi-hc-fw"></i> <span>view-dashboard</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-day" data-code="f31d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-day zmdi-hc-fw"></i> <span>view-day</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-headline" data-code="f31e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-headline zmdi-hc-fw"></i> <span>view-headline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-list-alt" data-code="f31f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-list-alt zmdi-hc-fw"></i> <span>view-list-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-list" data-code="f320"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-list zmdi-hc-fw"></i> <span>view-list</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-module" data-code="f321"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-module zmdi-hc-fw"></i> <span>view-module</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-quilt" data-code="f322"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-quilt zmdi-hc-fw"></i> <span>view-quilt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-stream" data-code="f323"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-stream zmdi-hc-fw"></i> <span>view-stream</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-subtitles" data-code="f324"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-subtitles zmdi-hc-fw"></i> <span>view-subtitles</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-toc" data-code="f325"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-toc zmdi-hc-fw"></i> <span>view-toc</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-web" data-code="f326"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-web zmdi-hc-fw"></i> <span>view-web</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="view-week" data-code="f327"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-view-week zmdi-hc-fw"></i> <span>view-week</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="widgets" data-code="f328"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-widgets zmdi-hc-fw"></i> <span>widgets</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Date / Time icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alarm-check" data-code="f329"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alarm-check zmdi-hc-fw"></i> <span>alarm-check</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alarm-off" data-code="f32a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alarm-off zmdi-hc-fw"></i> <span>alarm-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alarm-plus" data-code="f32b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alarm-plus zmdi-hc-fw"></i> <span>alarm-plus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alarm-snooze" data-code="f32c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alarm-snooze zmdi-hc-fw"></i> <span>alarm-snooze</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="alarm" data-code="f32d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-alarm zmdi-hc-fw"></i> <span>alarm</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="calendar-alt" data-code="f32e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-calendar-alt zmdi-hc-fw"></i> <span>calendar-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="calendar-check" data-code="f32f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> <span>calendar-check</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="calendar-close" data-code="f330"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-calendar-close zmdi-hc-fw"></i> <span>calendar-close</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="calendar-note" data-code="f331"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-calendar-note zmdi-hc-fw"></i> <span>calendar-note</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="calendar" data-code="f332"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-calendar zmdi-hc-fw"></i> <span>calendar</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="time-countdown" data-code="f333"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-time-countdown zmdi-hc-fw"></i> <span>time-countdown</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="time-interval" data-code="f334"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-time-interval zmdi-hc-fw"></i> <span>time-interval</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="time-restore-setting" data-code="f335"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-time-restore-setting zmdi-hc-fw"></i> <span>time-restore-setting</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="time-restore" data-code="f336"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-time-restore zmdi-hc-fw"></i> <span>time-restore</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="time" data-code="f337"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-time zmdi-hc-fw"></i> <span>time</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="timer-off" data-code="f338"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-timer-off zmdi-hc-fw"></i> <span>timer-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="timer" data-code="f339"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-timer zmdi-hc-fw"></i> <span>timer</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Social icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">


                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="android-alt" data-code="f33a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-android-alt zmdi-hc-fw"></i> <span>android-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="android" data-code="f33b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-android zmdi-hc-fw"></i> <span>android</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="apple" data-code="f33c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-apple zmdi-hc-fw"></i> <span>apple</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="behance" data-code="f33d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-behance zmdi-hc-fw"></i> <span>behance</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="codepen" data-code="f33e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-codepen zmdi-hc-fw"></i> <span>codepen</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="dribbble" data-code="f33f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-dribbble zmdi-hc-fw"></i> <span>dribbble</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="dropbox" data-code="f340"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-dropbox zmdi-hc-fw"></i> <span>dropbox</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="evernote" data-code="f341"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-evernote zmdi-hc-fw"></i> <span>evernote</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="facebook-box" data-code="f342"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-facebook-box zmdi-hc-fw"></i> <span>facebook-box</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="facebook" data-code="f343"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-facebook zmdi-hc-fw"></i> <span>facebook</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="github-box" data-code="f344"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-github-box zmdi-hc-fw"></i> <span>github-box</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="github" data-code="f345"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-github zmdi-hc-fw"></i> <span>github</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-drive" data-code="f346"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-drive zmdi-hc-fw"></i> <span>google-drive</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-earth" data-code="f347"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-earth zmdi-hc-fw"></i> <span>google-earth</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-glass" data-code="f348"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-glass zmdi-hc-fw"></i> <span>google-glass</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-maps" data-code="f349"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-maps zmdi-hc-fw"></i> <span>google-maps</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-pages" data-code="f34a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-pages zmdi-hc-fw"></i> <span>google-pages</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-play" data-code="f34b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-play zmdi-hc-fw"></i> <span>google-play</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-plus-box" data-code="f34c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-plus-box zmdi-hc-fw"></i> <span>google-plus-box</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-plus" data-code="f34d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-plus zmdi-hc-fw"></i> <span>google-plus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google" data-code="f34e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google zmdi-hc-fw"></i> <span>google</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="instagram" data-code="f34f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-instagram zmdi-hc-fw"></i> <span>instagram</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="language-css3" data-code="f350"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-language-css3 zmdi-hc-fw"></i> <span>language-css3</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="language-html5" data-code="f351"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-language-html5 zmdi-hc-fw"></i> <span>language-html5</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="language-javascript" data-code="f352"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-language-javascript zmdi-hc-fw"></i> <span>language-javascript</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="language-python-alt" data-code="f353"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-language-python-alt zmdi-hc-fw"></i> <span>language-python-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="language-python" data-code="f354"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-language-python zmdi-hc-fw"></i> <span>language-python</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="lastfm" data-code="f355"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-lastfm zmdi-hc-fw"></i> <span>lastfm</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="linkedin-box" data-code="f356"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-linkedin-box zmdi-hc-fw"></i> <span>linkedin-box</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="paypal" data-code="f357"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-paypal zmdi-hc-fw"></i> <span>paypal</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pinterest-box" data-code="f358"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pinterest-box zmdi-hc-fw"></i> <span>pinterest-box</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pocket" data-code="f359"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pocket zmdi-hc-fw"></i> <span>pocket</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="polymer" data-code="f35a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-polymer zmdi-hc-fw"></i> <span>polymer</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="rss" data-code="f3ea"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-rss zmdi-hc-fw"></i> <span>rss</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="share" data-code="f35b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-share zmdi-hc-fw"></i> <span>share</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="stackoverflow" data-code="f35c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-stackoverflow zmdi-hc-fw"></i> <span>stackoverflow</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="steam-square" data-code="f35d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-steam-square zmdi-hc-fw"></i> <span>steam-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="steam" data-code="f35e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-steam zmdi-hc-fw"></i> <span>steam</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="twitter-box" data-code="f35f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-twitter-box zmdi-hc-fw"></i> <span>twitter-box</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="twitter" data-code="f360"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-twitter zmdi-hc-fw"></i> <span>twitter</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="vk" data-code="f361"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-vk zmdi-hc-fw"></i> <span>vk</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="wikipedia" data-code="f362"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wikipedia zmdi-hc-fw"></i> <span>wikipedia</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="windows" data-code="f363"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-windows zmdi-hc-fw"></i> <span>windows</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="500px" data-code="f3ee"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-500px zmdi-hc-fw"></i> <span>500px</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="8tracks" data-code="f3ef"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-8tracks zmdi-hc-fw"></i> <span>8tracks</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="amazon" data-code="f3f0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-amazon zmdi-hc-fw"></i> <span>amazon</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="blogger" data-code="f3f1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-blogger zmdi-hc-fw"></i> <span>blogger</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="delicious" data-code="f3f2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-delicious zmdi-hc-fw"></i> <span>delicious</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="disqus" data-code="f3f3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-disqus zmdi-hc-fw"></i> <span>disqus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flattr" data-code="f3f4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flattr zmdi-hc-fw"></i> <span>flattr</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flickr" data-code="f3f5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flickr zmdi-hc-fw"></i> <span>flickr</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="github-alt" data-code="f3f6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-github-alt zmdi-hc-fw"></i> <span>github-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="google-old" data-code="f3f7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-google-old zmdi-hc-fw"></i> <span>google-old</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="linkedin" data-code="f3f8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-linkedin zmdi-hc-fw"></i> <span>linkedin</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="odnoklassniki" data-code="f3f9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-odnoklassniki zmdi-hc-fw"></i> <span>odnoklassniki</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="outlook" data-code="f3fa"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-outlook zmdi-hc-fw"></i> <span>outlook</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="paypal-alt" data-code="f3fb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-paypal-alt zmdi-hc-fw"></i> <span>paypal-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pinterest" data-code="f3fc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pinterest zmdi-hc-fw"></i> <span>pinterest</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="playstation" data-code="f3fd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-playstation zmdi-hc-fw"></i> <span>playstation</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="reddit" data-code="f3fe"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-reddit zmdi-hc-fw"></i> <span>reddit</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="skype" data-code="f3ff"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-skype zmdi-hc-fw"></i> <span>skype</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="slideshare" data-code="f400"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-slideshare zmdi-hc-fw"></i> <span>slideshare</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="soundcloud" data-code="f401"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-soundcloud zmdi-hc-fw"></i> <span>soundcloud</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tumblr" data-code="f402"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tumblr zmdi-hc-fw"></i> <span>tumblr</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="twitch" data-code="f403"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-twitch zmdi-hc-fw"></i> <span>twitch</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="vimeo" data-code="f404"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-vimeo zmdi-hc-fw"></i> <span>vimeo</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="whatsapp" data-code="f405"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-whatsapp zmdi-hc-fw"></i> <span>whatsapp</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="xbox" data-code="f406"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-xbox zmdi-hc-fw"></i> <span>xbox</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="yahoo" data-code="f407"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-yahoo zmdi-hc-fw"></i> <span>yahoo</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="youtube-play" data-code="f408"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-youtube-play zmdi-hc-fw"></i> <span>youtube-play</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="youtube" data-code="f409"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-youtube zmdi-hc-fw"></i> <span>youtube</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Image icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="aspect-ratio-alt" data-code="f364"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-aspect-ratio-alt zmdi-hc-fw"></i> <span>aspect-ratio-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="aspect-ratio" data-code="f365"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-aspect-ratio zmdi-hc-fw"></i> <span>aspect-ratio</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="blur-circular" data-code="f366"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-blur-circular zmdi-hc-fw"></i> <span>blur-circular</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="blur-linear" data-code="f367"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-blur-linear zmdi-hc-fw"></i> <span>blur-linear</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="blur-off" data-code="f368"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-blur-off zmdi-hc-fw"></i> <span>blur-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="blur" data-code="f369"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-blur zmdi-hc-fw"></i> <span>blur</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="brightness-2" data-code="f36a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-brightness-2 zmdi-hc-fw"></i> <span>brightness-2</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="brightness-3" data-code="f36b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-brightness-3 zmdi-hc-fw"></i> <span>brightness-3</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="brightness-4" data-code="f36c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-brightness-4 zmdi-hc-fw"></i> <span>brightness-4</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="brightness-5" data-code="f36d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-brightness-5 zmdi-hc-fw"></i> <span>brightness-5</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="brightness-6" data-code="f36e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-brightness-6 zmdi-hc-fw"></i> <span>brightness-6</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="brightness-7" data-code="f36f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-brightness-7 zmdi-hc-fw"></i> <span>brightness-7</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="brightness-auto" data-code="f370"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-brightness-auto zmdi-hc-fw"></i> <span>brightness-auto</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="brightness-setting" data-code="f371"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-brightness-setting zmdi-hc-fw"></i> <span>brightness-setting</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="broken-image" data-code="f372"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-broken-image zmdi-hc-fw"></i> <span>broken-image</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="center-focus-strong" data-code="f373"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-center-focus-strong zmdi-hc-fw"></i> <span>center-focus-strong</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="center-focus-weak" data-code="f374"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-center-focus-weak zmdi-hc-fw"></i> <span>center-focus-weak</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="compare" data-code="f375"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-compare zmdi-hc-fw"></i> <span>compare</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop-16-9" data-code="f376"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop-16-9 zmdi-hc-fw"></i> <span>crop-16-9</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop-3-2" data-code="f377"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop-3-2 zmdi-hc-fw"></i> <span>crop-3-2</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop-5-4" data-code="f378"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop-5-4 zmdi-hc-fw"></i> <span>crop-5-4</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop-7-5" data-code="f379"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop-7-5 zmdi-hc-fw"></i> <span>crop-7-5</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop-din" data-code="f37a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop-din zmdi-hc-fw"></i> <span>crop-din</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop-free" data-code="f37b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop-free zmdi-hc-fw"></i> <span>crop-free</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop-landscape" data-code="f37c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop-landscape zmdi-hc-fw"></i> <span>crop-landscape</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop-portrait" data-code="f37d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop-portrait zmdi-hc-fw"></i> <span>crop-portrait</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="crop-square" data-code="f37e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-crop-square zmdi-hc-fw"></i> <span>crop-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="exposure-alt" data-code="f37f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-exposure-alt zmdi-hc-fw"></i> <span>exposure-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="exposure" data-code="f380"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-exposure zmdi-hc-fw"></i> <span>exposure</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="filter-b-and-w" data-code="f381"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-filter-b-and-w zmdi-hc-fw"></i> <span>filter-b-and-w</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="filter-center-focus" data-code="f382"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-filter-center-focus zmdi-hc-fw"></i> <span>filter-center-focus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="filter-frames" data-code="f383"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-filter-frames zmdi-hc-fw"></i> <span>filter-frames</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="filter-tilt-shift" data-code="f384"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-filter-tilt-shift zmdi-hc-fw"></i> <span>filter-tilt-shift</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="gradient" data-code="f385"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-gradient zmdi-hc-fw"></i> <span>gradient</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="grain" data-code="f386"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-grain zmdi-hc-fw"></i> <span>grain</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="graphic-eq" data-code="f387"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-graphic-eq zmdi-hc-fw"></i> <span>graphic-eq</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hdr-off" data-code="f388"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hdr-off zmdi-hc-fw"></i> <span>hdr-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hdr-strong" data-code="f389"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hdr-strong zmdi-hc-fw"></i> <span>hdr-strong</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hdr-weak" data-code="f38a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hdr-weak zmdi-hc-fw"></i> <span>hdr-weak</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hdr" data-code="f38b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hdr zmdi-hc-fw"></i> <span>hdr</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="iridescent" data-code="f38c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-iridescent zmdi-hc-fw"></i> <span>iridescent</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="leak-off" data-code="f38d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-leak-off zmdi-hc-fw"></i> <span>leak-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="leak" data-code="f38e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-leak zmdi-hc-fw"></i> <span>leak</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="looks" data-code="f38f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-looks zmdi-hc-fw"></i> <span>looks</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="loupe" data-code="f390"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-loupe zmdi-hc-fw"></i> <span>loupe</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="panorama-horizontal" data-code="f391"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-panorama-horizontal zmdi-hc-fw"></i> <span>panorama-horizontal</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="panorama-vertical" data-code="f392"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-panorama-vertical zmdi-hc-fw"></i> <span>panorama-vertical</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="panorama-wide-angle" data-code="f393"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-panorama-wide-angle zmdi-hc-fw"></i> <span>panorama-wide-angle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="photo-size-select-large" data-code="f394"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-photo-size-select-large zmdi-hc-fw"></i> <span>photo-size-select-large</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="photo-size-select-small" data-code="f395"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-photo-size-select-small zmdi-hc-fw"></i> <span>photo-size-select-small</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="picture-in-picture" data-code="f396"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-picture-in-picture zmdi-hc-fw"></i> <span>picture-in-picture</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="slideshow" data-code="f397"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-slideshow zmdi-hc-fw"></i> <span>slideshow</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="texture" data-code="f398"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-texture zmdi-hc-fw"></i> <span>texture</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tonality" data-code="f399"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tonality zmdi-hc-fw"></i> <span>tonality</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="vignette" data-code="f39a"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-vignette zmdi-hc-fw"></i> <span>vignette</span></a></div>

                                <div class="col-xl-1 col-l
        <!-- END IMAGE ICONS -->g-2 col-md-3 col-sm-4 col-xs-6" data-name="wb-auto" data-code="f39b"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-wb-auto zmdi-hc-fw"></i> <span>wb-auto</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Audio / Video icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="eject-alt" data-code="f39c"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-eject-alt zmdi-hc-fw"></i> <span>eject-alt</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="eject" data-code="f39d"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-eject zmdi-hc-fw"></i> <span>eject</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="equalizer" data-code="f39e"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-equalizer zmdi-hc-fw"></i> <span>equalizer</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="fast-forward" data-code="f39f"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-fast-forward zmdi-hc-fw"></i> <span>fast-forward</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="fast-rewind" data-code="f3a0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-fast-rewind zmdi-hc-fw"></i> <span>fast-rewind</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="forward-10" data-code="f3a1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-forward-10 zmdi-hc-fw"></i> <span>forward-10</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="forward-30" data-code="f3a2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-forward-30 zmdi-hc-fw"></i> <span>forward-30</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="forward-5" data-code="f3a3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-forward-5 zmdi-hc-fw"></i> <span>forward-5</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hearing" data-code="f3a4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hearing zmdi-hc-fw"></i> <span>hearing</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pause-circle-outline" data-code="f3a5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pause-circle-outline zmdi-hc-fw"></i> <span>pause-circle-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pause-circle" data-code="f3a6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pause-circle zmdi-hc-fw"></i> <span>pause-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="pause" data-code="f3a7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-pause zmdi-hc-fw"></i> <span>pause</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="play-circle-outline" data-code="f3a8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-play-circle-outline zmdi-hc-fw"></i> <span>play-circle-outline</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="play-circle" data-code="f3a9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-play-circle zmdi-hc-fw"></i> <span>play-circle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="play" data-code="f3aa"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-play zmdi-hc-fw"></i> <span>play</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="playlist-audio" data-code="f3ab"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-playlist-audio zmdi-hc-fw"></i> <span>playlist-audio</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="playlist-plus" data-code="f3ac"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-playlist-plus zmdi-hc-fw"></i> <span>playlist-plus</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="repeat-one" data-code="f3ad"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-repeat-one zmdi-hc-fw"></i> <span>repeat-one</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="repeat" data-code="f3ae"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-repeat zmdi-hc-fw"></i> <span>repeat</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="replay-10" data-code="f3af"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-replay-10 zmdi-hc-fw"></i> <span>replay-10</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="replay-30" data-code="f3b0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-replay-30 zmdi-hc-fw"></i> <span>replay-30</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="replay-5" data-code="f3b1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-replay-5 zmdi-hc-fw"></i> <span>replay-5</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="replay" data-code="f3b2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-replay zmdi-hc-fw"></i> <span>replay</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="shuffle" data-code="f3b3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-shuffle zmdi-hc-fw"></i> <span>shuffle</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="skip-next" data-code="f3b4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-skip-next zmdi-hc-fw"></i> <span>skip-next</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="skip-previous" data-code="f3b5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-skip-previous zmdi-hc-fw"></i> <span>skip-previous</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="stop" data-code="f3b6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-stop zmdi-hc-fw"></i> <span>stop</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="surround-sound" data-code="f3b7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-surround-sound zmdi-hc-fw"></i> <span>surround-sound</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tune" data-code="f3b8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tune zmdi-hc-fw"></i> <span>tune</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="volume-down" data-code="f3b9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-volume-down zmdi-hc-fw"></i> <span>volume-down</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="volume-mute" data-code="f3ba"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-volume-mute zmdi-hc-fw"></i> <span>volume-mute</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="volume-off" data-code="f3bb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-volume-off zmdi-hc-fw"></i> <span>volume-off</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="volume-up" data-code="f3bc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-volume-up zmdi-hc-fw"></i> <span>volume-up</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Number icons</h2>
                        </div>
                        <div class="section-body">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="n-1-square" data-code="f3bd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-n-1-square zmdi-hc-fw"></i> <span>n-1-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="n-2-square" data-code="f3be"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-n-2-square zmdi-hc-fw"></i> <span>n-2-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="n-3-square" data-code="f3bf"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-n-3-square zmdi-hc-fw"></i> <span>n-3-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="n-4-square" data-code="f3c0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-n-4-square zmdi-hc-fw"></i> <span>n-4-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="n-5-square" data-code="f3c1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-n-5-square zmdi-hc-fw"></i> <span>n-5-square</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="neg-1" data-code="f3c3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-neg-1 zmdi-hc-fw"></i> <span>neg-1</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="neg-2" data-code="f3c4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-neg-2 zmdi-hc-fw"></i> <span>neg-2</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="plus-1" data-code="f3c5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-plus-1 zmdi-hc-fw"></i> <span>plus-1</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="plus-2" data-code="f3c6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-plus-2 zmdi-hc-fw"></i> <span>plus-2</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="sec-10" data-code="f3c7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-sec-10 zmdi-hc-fw"></i> <span>sec-10</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="sec-3" data-code="f3c8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-sec-3 zmdi-hc-fw"></i> <span>sec-3</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="zero" data-code="f3c9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-zero zmdi-hc-fw"></i> <span>zero</span></a></div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="section-header">
                            <h2>Other icons</h2>
                        </div>
                        <div class="section-body m-b-0">
                            <div class="material-icon">

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airline-seat-flat-angled" data-code="f3ca"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airline-seat-flat-angled zmdi-hc-fw"></i> <span>airline-seat-flat-angled</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airline-seat-flat" data-code="f3cb"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airline-seat-flat zmdi-hc-fw"></i> <span>airline-seat-flat</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airline-seat-individual-suite" data-code="f3cc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airline-seat-individual-suite zmdi-hc-fw"></i> <span>airline-seat-individual-suite</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airline-seat-legroom-extra" data-code="f3cd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airline-seat-legroom-extra zmdi-hc-fw"></i> <span>airline-seat-legroom-extra</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airline-seat-legroom-normal" data-code="f3ce"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airline-seat-legroom-normal zmdi-hc-fw"></i> <span>airline-seat-legroom-normal</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airline-seat-legroom-reduced" data-code="f3cf"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airline-seat-legroom-reduced zmdi-hc-fw"></i> <span>airline-seat-legroom-reduced</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airline-seat-recline-extra" data-code="f3d0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airline-seat-recline-extra zmdi-hc-fw"></i> <span>airline-seat-recline-extra</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airline-seat-recline-normal" data-code="f3d1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airline-seat-recline-normal zmdi-hc-fw"></i> <span>airline-seat-recline-normal</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="airplay" data-code="f3d2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-airplay zmdi-hc-fw"></i> <span>airplay</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="closed-caption" data-code="f3d3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-closed-caption zmdi-hc-fw"></i> <span>closed-caption</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="confirmation-number" data-code="f3d4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-confirmation-number zmdi-hc-fw"></i> <span>confirmation-number</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="developer-board" data-code="f3d5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-developer-board zmdi-hc-fw"></i> <span>developer-board</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="disc-full" data-code="f3d6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-disc-full zmdi-hc-fw"></i> <span>disc-full</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="explicit" data-code="f3d7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-explicit zmdi-hc-fw"></i> <span>explicit</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flight-land" data-code="f3d8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flight-land zmdi-hc-fw"></i> <span>flight-land</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flight-takeoff" data-code="f3d9"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flight-takeoff zmdi-hc-fw"></i> <span>flight-takeoff</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flip-to-back" data-code="f3da"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flip-to-back zmdi-hc-fw"></i> <span>flip-to-back</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="flip-to-front" data-code="f3db"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-flip-to-front zmdi-hc-fw"></i> <span>flip-to-front</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="group-work" data-code="f3dc"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-group-work zmdi-hc-fw"></i> <span>group-work</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hd" data-code="f3dd"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hd zmdi-hc-fw"></i> <span>hd</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="hq" data-code="f3de"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-hq zmdi-hc-fw"></i> <span>hq</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="markunread-mailbox" data-code="f3df"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-markunread-mailbox zmdi-hc-fw"></i> <span>markunread-mailbox</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="memory" data-code="f3e0"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-memory zmdi-hc-fw"></i> <span>memory</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="nfc" data-code="f3e1"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-nfc zmdi-hc-fw"></i> <span>nfc</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="play-for-work" data-code="f3e2"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-play-for-work zmdi-hc-fw"></i> <span>play-for-work</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="power-input" data-code="f3e3"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-power-input zmdi-hc-fw"></i> <span>power-input</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="present-to-all" data-code="f3e4"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-present-to-all zmdi-hc-fw"></i> <span>present-to-all</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="satellite" data-code="f3e5"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-satellite zmdi-hc-fw"></i> <span>satellite</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="tap-and-play" data-code="f3e6"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-tap-and-play zmdi-hc-fw"></i> <span>tap-and-play</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="vibration" data-code="f3e7"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-vibration zmdi-hc-fw"></i> <span>vibration</span></a></div>

                                <div class="col-lg-3 col-md-4 col-sm-6 icon-size" data-name="voicemail" data-code="f3e8"><a href="#" data-toggle="modal" data-target="#iconModal"><i class="zmdi zmdi-voicemail zmdi-hc-fw"></i> <span>voicemail</span></a></div>

                            </div>
                        </div>
                    </div>





                </div>
            </div>
        </div>

    </div>
    <!-- End Contain Section -->    <!-- Start Footer Section -->    <footer class="footer">        © 2018 All rights reserved. Template designed by <a class="text-primary" href="http://www.bootstrapmb.com/">Prince</a>    </footer>    <!-- End Footer Section -->
</div>
</div>

<!-- Start core js -->
<script src="../../assets/global/plugins/jquery/dist/jquery.min.js"></script>
<script src="../../assets/global/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../assets/global/plugins/Waves/dist/waves.min.js"></script>
<script src="../../assets/global/plugins/screenfull.js/dist/screenfull.min.js"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Start core javascript -->

<!-- Start global js -->
<script src="../../assets/global/js/left-menu.min.js"></script>
<!-- End global js -->

<!-- Start page plugin js -->

<!-- End page plugin js -->

<!-- Start page js -->

<!-- End page js -->


</body>
</html>